<template>
  <div>
    <!-- 搜索与添加 -->
    <el-form :model="form" label-width="auto" :inline="true" style="margin-bottom: 20px">
      <el-form-item label="用户名">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="toAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column prop="userName" label="用户名" width="180" />
      <el-table-column prop="realName" label="真实姓名" width="180" />
      <el-table-column prop="deptID" label="部门ID" width="100" />
      <el-table-column label="操作" width="160">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="toEdit(scope.row)">编辑</el-button>
          <el-button link type="danger" size="small" @click="removeById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑/添加弹窗 -->
    <el-dialog v-model="editDialogFormVisible" :title="dialogTitle" width="500">
      <el-form :model="editForm" label-width="auto">
        <el-form-item label="用户名">
          <el-input v-model="editForm.userName" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editForm.password" />
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="editForm.realName" />
        </el-form-item>
        <el-form-item label="部门ID">
          <el-input v-model="editForm.deptID" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElNotification, ElMessageBox } from 'element-plus'
import service from '@/utils/request'

const form = ref({ username: '' }) // 搜索条件
const tableData = ref([]) // 表格数据
const loading = ref(false) // 表格 loading 状态

const editDialogFormVisible = ref(false)
const dialogTitle = ref('添加用户')
const editForm = ref({
  id: '',
  userName: '',
  password: '',
  realName: '',
  deptID: ''
})

// 加载数据
function listData() {
  loading.value = true
  service.get('/user/list').then(res => {
    tableData.value = res.data
    loading.value = false
  })
}

// 搜索
// 搜索用户（按用户名）
function onSubmit() {
  loading.value = true
  service.get('/user/selectByUsername', { params: { username: form.value.username } }).then(res => {
    if (res.data.code === 200) {
      tableData.value = res.data.data
    } else {
      tableData.value = []
      ElNotification({ title: '搜索失败', message: res.data.message || '未找到用户', type: 'warning' })
    }
    loading.value = false
  }).catch(() => {
    loading.value = false
    ElNotification({ title: '错误', message: '服务器请求失败', type: 'error' })
  })
}

// 添加用户
function toAdd() {
  dialogTitle.value = '添加用户'
  editForm.value = {
    id: '',
    userName: '',
    password: '',
    realName: '',
    deptID: ''
  }
  editDialogFormVisible.value = true
}

// 编辑用户
function toEdit(row) {
  dialogTitle.value = '编辑用户'
  service.get('/user/getById/' + row.id).then(res => {
    editForm.value = res.data
    editDialogFormVisible.value = true
  })
}

// 保存用户（添加/编辑）
function save() {
  const url = '/user/saveOrUpdate'
  service.post(url, editForm.value).then(res => {
    if (res.data) {
      ElNotification({ title: '成功', message: '保存成功', type: 'success' })
      editDialogFormVisible.value = false
      listData()
    } else {
      ElNotification({ title: '失败', message: '保存失败', type: 'error' })
    }
  })
}

// 删除
function removeById(id) {
  ElMessageBox.confirm('确认删除该用户吗？', '提示', {
    type: 'warning'
  }).then(() => {
    service.get('/user/deleteById/' + id).then(res => {
      if (res.data) {
        ElNotification({ title: '成功', message: '删除成功', type: 'success' })
        listData()
      } else {
        ElNotification({ title: '失败', message: '删除失败', type: 'error' })
      }
    })
  })
}

onMounted(() => {
  listData()
})
</script>
